<template>
  <div>
    <div class="songCount">
      <i class="iconfont icon24gl-play"></i>
      <span>{{CalcPlayCount(playCount)}}</span>
    </div>

    <img :src="picUrl" alt srcset width="157" height="157" />
    <div class="songPlay">
      <i class="iconfont iconbofang"></i>
    </div>
    <div class="songName">
      <span>{{name}}</span>
    </div>
    <div class="nickname" v-if="nickname">
      <i class="iconfont iconxingmingyonghumingnicheng"></i>
      <span>{{nickname}}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
const props = defineProps({
  playCount: {
    type: Number,
    default: 0
  },
  picUrl: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  nickname: {
    type: String,
    default: ''
  }
})
const CalcPlayCount = computed(() => count => {
  return count > 10000 ? Math.ceil(count / 10000) + '万' : count
})
</script>

<style lang="scss" scoped>
.songCount {
  position: absolute;
  font-size: 12px;
  font-weight: bolder;
  color: #fff;
  right: 10px;
  top: 3px;
  .iconfont {
    font-size: 12px;
    margin-right: 3px;
  }
}
.songPlay {
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  bottom: 100px;
  right: 20px;
  transition: opacity 0.15s;
  opacity: 0;
  &:hover {
    opacity: 1;
    cursor: pointer;
  }
  &::after {
    position: absolute;
    content: '';
    filter: blur(30px);
    background-attachment: scroll;
    width: 30px;
    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-position: -110px -104px;
    left: 0;
    background-color: #b3b3b3;
    height: 30px;
  }
  .iconfont {
    font-size: 13px;
    position: absolute;
    color: red;
    left: 10px;
    top: 8px;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
.nickname {
  position: absolute;
  color: #fff;
  font-size: 12px;
  z-index: 9;
  bottom: 92px;
  left: 10px;
  font-weight: bold;
  .iconfont {
    font-size: 12px;
  }
  &:hover {
    cursor: pointer;
  }
}
.songName {
  text-align: left;
  font-size: 13px;
  font-weight: bolder;
  height: 80px;
  text-align: left;
  span {
    color: #b3b3b3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    &:hover {
      color: #fff;
      cursor: pointer;
    }
  }
}
img {
  width: 100%;
  // height: 100%;
  border-radius: 6px;
  &:hover {
    opacity: 1;
    cursor: pointer;
  }
  &:hover + .songPlay {
    opacity: 1;
    cursor: pointer;
  }
}
</style>